<template>
    <div class="easy-popup">
        <transition name="fade">
            <div
                v-if="value && overlay"
                class="overlay fixed absolute--fill bg-black-70 z-999"
                @click="onClickOverlay"
            ></div>
        </transition>

        <transition :name="transitionName">
            <div
                v-if="value"
                class="bg-white fixed z-1000 overflow-hidden"
                :class="[positionClass, roundClass]"
            >
                <slot></slot>
            </div>
        </transition>
    </div>
</template>

<script>
export default {
    name: 'EasyPopup',

    props: {
        value: {
            type: Boolean,
            default: false,
        },

        /** @type {import('vue').PropOptions<'center'|'top'|'bottom'|'left'|'right'>} 弹出位置 */
        position: {
            type: String,
            default: 'center',
        },

        /** TODO: 是否出现关闭按钮 */
        closeable: {
            type: Boolean,
            default: false,
        },

        /** 是否圆角弹窗 */
        round: {
            type: Boolean,
            default: false,
        },

        /** 是否显示遮罩层 */
        overlay: {
            type: Boolean,
            default: true,
        },

        /** 点击遮罩层后是否关闭弹窗 */
        closeOnClickOverlay: {
            type: Boolean,
            default: true,
        },
    },

    computed: {
        positionClass() {
            const hashMap = {
                center: 'absolute--center',
                top: 'top-0 left-0 right-0',
                bottom: 'bottom-0 left-0 right-0',
                left: 'top-0 left-0 bottom-0',
                right: 'top-0 right-0 bottom-0',
            };
            return hashMap[this.position] || hashMap['center'];
        },

        roundClass() {
            if (this.round) {
                const hashMap = {
                    center: 'br-8',
                    top: 'br-8 br--bottom',
                    right: 'br-8 br--left',
                    bottom: 'br-8 br--top',
                    left: 'br-8 br--right',
                };

                return hashMap[this.position] || '';
            }

            return '';
        },

        transitionName() {
            const hashMap = {
                center: 'fade',
                top: 'slidedown',
                right: 'slideleft',
                bottom: 'slideup',
                left: 'slideright',
            };
            return hashMap[this.position];
        },
    },

    methods: {
        /** 点击遮罩层 */
        onClickOverlay() {
            if (this.closeOnClickOverlay) {
                this.onClose();
            }
        },

        onClose() {
            this.$emit('input', false);
        },
    },
};
</script>
